<template>
  <div ref="container" class="w-full h-full mx-0 my-auto">
    <div ref="chart" />
  </div>
</template>
<script>
import * as echarts from 'echarts'

export default {
  props: {
    data: {
      type: Array,
      default: () => {
        return []
      },
    },
    option: {
      type: Object,
      default: () => {
        return {}
      },
    },
    title: {
      type: String,
      default: '',
    },
    xName: {
      type: String,
      default: '',
    },
    yName: {
      type: String,
      default: '',
    },
  },
  data() {
    return {
      originOption: {
        // 渐变色设置
        // visualMap: [
        //   {
        //     show: false,
        //     type: 'continuous',
        //     seriesIndex: 0,
        //     min: 0,
        //     max: 400,
        //   },
        //   {
        //     show: false,
        //     type: 'continuous',
        //     seriesIndex: 0,
        //     dimension: 0,
        //     min: 0,
        //     max: 6,
        //   },
        // ],
        title: {
          show: true,
          left: 'center',
          top: '1%',
          text: '',
          subtext: '',
          textStyle: {
            color: '#fff',
            // fontSize: '100',
            // fontWeight: 'normal',
            // lineHeight: '1.25rem',
          },
        },
        // tooltip: {
        //   trigger: 'axis',
        //   axisPointer: {
        //     type: 'shadow'
        //   },
        //   backgroundColor: 'rgba(255,255,255, 0.5)', // 悬浮框背景色
        //   borderColor: '#333', // 悬浮框边框颜色
        //   borderWidth: 1, // 悬浮框边框宽度
        //   textStyle: { // 悬浮框文字样式
        //     color: '#333'
        //   }
        // },
        legend: {
          show: true,
          // type: 'plain',
          // left: 0,
          bottom: '5%',
          icon: 'circle',
          padding: 1,
          itemStyle: {
            // color: '#fff'
          },
          textStyle: {
            // fontSize: 10,
            color: '#FFFFFF',
          },
        },
        textStyle: {
          color: '#bbb',
        },
        grid: {
          x: '7%',
          y: '10%',
          x2: '10%',
          y2: '20%'
        },
        xAxis: {
          type: 'category',
          nameTextStyle: {
            fontSize: 20
          },
          axisLabel: {
            fontSize: 20
          },
          data: [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 60, 65, 70, 75, 80, 85, 90, 95, 100, 105, 110, 115, 120, 125, 130, 135, 140, 145, 150, 155, 160, 165, 170, 175, 180]
        },
        yAxis: {
          type: 'value', // 坐标名称
          axisLabel: {
            fontSize: 20
          },
          nameTextStyle: {
            fontSize: 20
          },
          // name: 'mm',
          // axisLine: {
          //   show: true, // 显示Y轴坐标
          // },
          splitLine: {
            show: true, // 显示水平刻度线
            color: "#f00",
            lineStyle: {
              color: ['rgba(255, 255, 0, 0.2)'],
              type: [3, 3]
            }
          },
          axisTick: {
            show: false, // 显示刻度
          },

        },
        series: [
          {
            name: '2年',
            data: [0.147291462, 0.15529772, 0.164472216, 0.175108604, 0.187610698, 0.202550105, 0.220764462, 0.243534083, 0.272921182, 0.312477295, 0.36888512, 0.456363833, 0.611252949, 0.95986803, 2.356964285, 1.284371677, 0.853563935, 0.644843961, 0.52251213, 0.442224001, 0.38543419, 0.343076671, 0.310211626, 0.283923215, 0.262380998, 0.244378364, 0.229087689, 0.215922292, 0.204454591, 0.194365491, 0.185411934, 0.177405451, 0.170197592, 0.163669789, 0.157726161, 0.152288305, 0.147291462],
            type: 'line',
            smooth: true,
            symbolSize: 0,
          },
          {
            name: '3年',
            data: [0.165449032, 0.174442273, 0.184747768, 0.196695373, 0.21073868, 0.227519764, 0.247979522, 0.273556101, 0.306565938, 0.350998388, 0.41435997, 0.512622748, 0.686606046, 1.078197159, 2.647522488, 1.442704465, 0.958788271, 0.724338039, 0.586925574, 0.496739808, 0.432949151, 0.385369947, 0.348453415, 0.318924262, 0.294726397, 0.274504462, 0.257328807, 0.242540427, 0.229659029, 0.21832618, 0.20826886, 0.199275366, 0.191178948, 0.18384642, 0.177170083, 0.171061868, 0.165449032],
            type: 'line',
            smooth: true,
            symbolSize: 0,
          },
          {
            name: '5年',
            data: [0.188324864, 0.198561556, 0.210291942, 0.223891484, 0.239876492, 0.258977814, 0.282266443, 0.311379372, 0.348953318, 0.399529227, 0.471651505, 0.5835006, 0.781539721, 1.22727423, 3.013582532, 1.642180187, 1.091355258, 0.824488733, 0.668076915, 0.565421603, 0.492810922, 0.438653173, 0.396632373, 0.363020367, 0.335476781, 0.312458858, 0.292908408, 0.27607531, 0.261412865, 0.248513078, 0.237065181, 0.226828201, 0.21761233, 0.20926597, 0.201666528, 0.194713759, 0.188324864],
            type: 'line',
            smooth: true,
            symbolSize: 0,
          },
          {
            name: '10年',
            data: [0.219365434, 0.231289385, 0.244953227, 0.260794308, 0.279414038, 0.301663728, 0.328790896, 0.362702351, 0.406469409, 0.465381471, 0.549391275, 0.679675852, 0.910356691, 1.429559212, 3.510295062, 1.912851876, 1.271237449, 0.960384756, 0.778192424, 0.658616991, 0.574038284, 0.510954006, 0.462007144, 0.422855053, 0.390771607, 0.363959764, 0.341186919, 0.321579312, 0.304500135, 0.289474146, 0.276139354, 0.264215068, 0.253480195, 0.243758149, 0.234906132, 0.226807376, 0.219365434],
            type: 'line',
            smooth: true,
            symbolSize: 0,
          },
          {
            name: '20年',
            data: [0.250406003, 0.264017214, 0.279614512, 0.297697132, 0.318951584, 0.344349642, 0.375315349, 0.414025331, 0.463985499, 0.531233715, 0.627131045, 0.775851104, 1.039173662, 1.631844194, 4.007007591, 2.183523566, 1.451119641, 1.09628078, 0.888307933, 0.75181238, 0.655265646, 0.583254839, 0.527381915, 0.482689739, 0.446066433, 0.415460669, 0.38946543, 0.367083315, 0.347587405, 0.330435214, 0.315213528, 0.301601935, 0.28934806, 0.278250328, 0.268145737, 0.258900994, 0.250406003],
            type: 'line',
            smooth: true,
            symbolSize: 0,
          },
          {
            name: '30年',
            data: [0.268563573, 0.283161766, 0.299890063, 0.3192839, 0.342079566, 0.369319301, 0.402530409, 0.44404735, 0.497630255, 0.569754808, 0.672605895, 0.832110019, 1.114526759, 1.750173323, 4.297565795, 2.341856354, 1.556343978, 1.175774858, 0.952721377, 0.806328187, 0.702780607, 0.625548115, 0.565623705, 0.517690787, 0.478411832, 0.445586768, 0.417706548, 0.393701449, 0.372791843, 0.354395903, 0.338070454, 0.32347185, 0.310329416, 0.29842696, 0.287589659, 0.277674556, 0.268563573],
            type: 'line',
            smooth: true,
            symbolSize: 0,
          }
        ],
        // color: []
      },
    }
  },
  computed: {
    computedOption() {
      let newOption = Object.assign(this.originOption, this.option)
      const xDateList = this.data.map(function (item) {
        return item[0]
      })
      const yDateList = this.data.map(function (item) {
        return item[1]
      })

      // newOption.xAxis.data = xDateList
      // newOption.series.push({
      //   data: yDateList,
      //   type: 'line',
      // })

      newOption.title.text = this.title

      newOption.yAxis.name = this.yName

      newOption.xAxis.name = this.xName

      // 根据数据设置渐变最大值
      // 直接寻找最大值
      // newOption.visualMap[0].max = yDateList.reduce((y, current) => {
      //   y = y >= current ? y : current
      //   return y
      // }, 0)
      // newOption.visualMap[1].max = xDateList.length - 1

      return newOption
    },
  },
  mounted() {
    const containerDom = this.$refs.container
    const chartDom = this.$refs.chart

    chartDom.style.height = containerDom.clientHeight + 'px'

    const myChart = echarts.init(chartDom)

    this.computedOption && myChart.setOption(this.computedOption)

    window.onresize = () => {
      chartDom.style.height = containerDom.clientHeight + 'px'
      myChart.resize()
    }
  },
}
</script>
